<template>
  <div class="table-wrap table-content" id="table-list">
    <el-table
      ref="multipleTable"
      :data="dataList.items"
      tooltip-effect="dark"
      class="content-table"
    >
      <el-table-column prop="id" min-width="100" label="业务编号">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="platfromName" min-width="100" label="产品名称">
        <template slot-scope="scope">
          <span>{{ scope.row.platfromName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="productCode" min-width="100" label="产品Code">
        <template slot-scope="scope">
          <span>{{ scope.row.productCode }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="busStartTime" min-width="100" label="开通时间">
        <template slot-scope="scope">
          <span>{{ scope.row.busStartTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="busExpiredTime" min-width="100" label="到期时间">
        <template slot-scope="scope">
          <span>{{ scope.row.busExpiredTime }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="channelName" min-width="100" label="销售渠道">
        <template slot-scope="scope">
          <span>{{ scope.row.channelName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" min-width="100" label="业务状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status | Source }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="250"
        v-if="$store.state.dashboard.isContentwrite"
      >
        <template slot-scope="scope">
          <div class="handle-btn-wrap">
            <el-tooltip
              class="item"
              effect="dark"
              :content="'编辑'"
              placement="top"
            >
              <button
                class="more-operate look-btn"
                @click="productEdit(scope.row.id)"
                style="margin-right: 16px"
              >
                <i class="iconfont iconbianji cl-iconfont is-square"></i>
              </button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div
      class="cl-paganation pageing"
      id="pageing"
      :class="{ noJumper: dataList.totalPages <= 10 }"
    >
      <el-pagination
        v-if="dataList.totalCount > 0"
        background
        :layout="
          dataList.totalPages > 10
            ? 'total, slot, sizes, prev, pager, next,jumper'
            : 'total, slot, sizes, prev, pager, next'
        "
        :total="dataList.totalCount"
        :page-size="picSearchOptions.pageSize"
        :page-sizes="[10, 20, 50]"
        @current-change="changePage"
        @size-change="changeSize"
      >
        <div class="sizes-title">，每页显示</div>
        <button v-if="dataList.totalPages > 10" class="paging-confirm">
          跳转
        </button>
      </el-pagination>
    </div>
    <el-main>
      <Panel
        ref="articleContent"
        v-if="messageView"
        :productDetail="productDetail"
        @closeAddTemplate="closeAddTemplate"
        @putEdit="putEdit"
        :add="add"
      ></Panel>
    </el-main>
  </div>
</template>

<script>
import * as businessManageApi from "@/api/request/businessManageApi";
import Panel from "./panel";
export default {
  props: ["dataList", "picSearchOptions"],
  components: {
    Panel,
  },
  data() {
    return {
      add: "",
      messageView: false,
      multipleSelection: [], // 选择的list
      tableHeight: 500,
      productDetail: {
        attributeId: "",
        attributeType: "",
        attributeName: "",
        attributeDesc: "",
      },
    };
  },
  filters: {
    Source: function (row) {
      switch (row) {
        case 0:
          return "开通中";
        case 1:
          return "已开通";
        case 4:
          return "已释放";
        case 5:
          return "已退款";
        case 6:
          return "升级中";
        case 7:
          return "已过期";
      }
    },
  },
  mounted() {},
  methods: {
    /**
     * 关闭编辑
     */
    closeAddTemplate() {
      this.messageView = false;
    },
    /**
     * 打开编辑
     */
    productEdit(id) {
      this.$router.push({
        path: "/business/businessdetails",
        query: {
          id: id,
        },
      });
    },
    async putEdit() {
      this.productDetail.channelId = this.productDetail.id;
      let { data } = await businessManageApi.putEdit(this.productDetail);
      this.$emit("getList");
    },
    /**
     * 上下架操作
     */
    changeProductStatus(row) {
      this.$emit("changeProductStatus", row.id, row.status);
    },

    // 分页操作
    changePage(page) {
      this.picSearchOptions.pageIndex = page;
      this.$emit("getList");
    },
    changeSize(size) {
      this.picSearchOptions.pageSize = size;
      this.$emit("getList");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/content-manage/manege-table.scss";

.el-table /deep/ .el-table_1_column_3 .cell span {
  display: inline-block;
  // width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-table /deep/ .el-table__row .el-input .el-input__suffix {
  display: flex;
  align-items: center;
}
.el-table /deep/ .ascending .sort-caret.ascending {
  border-bottom-color: $--color-primary;
}
.el-table /deep/ .descending .sort-caret.descending {
  border-top-color: $--color-primary;
}
.table-wrap /deep/ .el-table__empty-text {
  width: 100%;
}
.el-switch {
  position: relative;
  width: 27px;
  height: 16px;
  border-radius: 10px;
  background-color: #dcdfe6;
  cursor: pointer;
  &::after {
    position: absolute;
    left: 60%;
    display: block;
    content: "";
    margin-left: -15px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s linear;
  }
}
.el-switch.is-checked {
  background-color: $--color-primary;
  &::after {
    left: 100%;
  }
}
//手机预览样式
.message-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(38, 38, 38, 0.6);
  z-index: 2000;
  .phone {
    position: relative;
    width: 300px;
    height: 450px;
    margin: 60px auto 0;
    // padding: 45px 0;
    background: $--color-white;
    border-radius: 6px;
    .line {
      position: absolute;
      top: 22px;
      left: 134px;
      width: 32px;
      height: 2px;
      border-radius: 1px;
      background: rgba(229, 229, 229, 1);
      border-radius: 6px;
    }
    .iconguanbi {
      position: absolute;
      top: 0;
      right: -70px;
      padding: 8px;
      font-size: 18px;
      font-weight: 600;
      color: $--color-text-secondary;
      border-radius: $--border-radius-circle;
      &:hover {
        color: $--color-primary;
      }
    }
    div {
      // width: 100%;
      // height: 100%;
      // border-top: 1px solid #e5e5e5;
      // border-bottom: 1px solid #e5e5e5;
      p {
        position: relative;
        width: 240px;
        min-height: 70px;
        margin: 40px 0 0 20px;
        padding: 10px 6px;
        background: $--background-color-base;
        border-radius: 2px 2px 2px 0px;
        border-radius: $--border-radius-base;
        font-size: $--font-size-small;
        font-weight: 400;
        color: $--color-text-primary;
        line-height: 20px;
        .arrow {
          position: absolute;
          left: -12px;
          bottom: 0;
          width: 0;
          height: 0;
          border-bottom: 10px solid $--background-color-base;
          border-left: 12px solid transparent;
        }
      }
    }
    .formdata-message {
      padding: 32px;
    }
    .formdatatitie {
      color: rgba(38, 38, 38, 1);
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 12px;
    }
    .formdatacontentTxt1 {
      color: rgba(38, 38, 38, 1);
      font-size: 16px;
      margin-bottom: 6px;
    }
    .formdatacontentTxt2 {
      color: rgba(100, 100, 100, 1);
      font-size: 14px;
      margin-bottom: 12px;
    }
  }
}
</style>
